<template>
  <div style="display: inline-block;text-align: left;">
    <el-button type="primary" style="margin-left:20px" size="small" @click="openEdit()">{{ $t('organization.add_department') }}</el-button>
    <el-dialog v-if="dialogTableVisible" :visible.sync="dialogTableVisible" :title="$t('table.add')" width="30%">
      <el-form ref="formData" :model="formData" :rules="rules" label-position="right" >

        <el-form-item :label="$t('table.company')" prop="company_id">
          <el-select v-model="formData.company_id" >
            <el-option v-for="(item,index) in list " :key="index" :label="item.company" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('table.department')" prop="department">
          <el-input v-model="formData.department"  label="right" type="text" />
        </el-form-item>
        <el-form-item align="right">
          <div>
            <el-button type="primary" size="small" @click="submitForm()">{{ $t('table.complete') }}</el-button>
            <el-button size="small" @click="closeDia()">{{ $t('table.cancel') }}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import store from '@/store'
import {
  department_add,
  get_select
} from '@/api/organization_manage/organization_manage'

export default {
  props: {
    row_id: {
      type: Number,
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      formData: {
        company_id: null,
        department: null
      },
      list: null,
      rules: {
        company_id:[
           {
            required: true,
            message: this.$t('validation.company1'),
            trigger: 'change'
          }
          
        ],
        department: [
          {
            required: true,
            message: this.$t('validation.department'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    openEdit(worker_id) {
      (this.formData = {})
      this.dialogTableVisible = true
      // 获取公司数据
      get_select(store.getters.token).then((res) => {
        console.log(res, '000res')
        this.list = res.data.list
      })
    },
    submitForm() {
      // 添加数据
      this.$refs["formData"].validate((valid)=>{
        if(valid){
           department_add(store.getters.token, this.formData).then((res) => {
        console.log(res, 'res22')
        if (res.data.status) {
          this.$message.success(this.$t('table.add_complete'))
          this.dialogTableVisible = false
          this.$emit('getLists')
        } else {
          this.$message.error(this.$t('table.add_fail'))
        }
      })
        }
      })
      
    },

    // 关闭弹窗
    closeDia() {
      this.dialogTableVisible = false
    }
  }
}
</script>

<style scoped>
/* 取消输入框下边距 */
.el-form-item {
  margin-bottom: 15px;
}
</style>
